import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  FlatList,
  TouchableOpacity,
  TouchableWithoutFeedback,
  Dimensions,
} from 'react-native';

import { getRequest } from '../../tools/network';
import Carousel from 'react-native-carousel';


var screenWidth = Dimensions.get('window').width;

class HomeCarousel extends Component {
  state = {
    data: this.props.data
  };

  render() {
    var navigation = this.props.navigation;

    return (
      <Carousel width={screenWidth}
        indicatorColor='white'
        inactiveIndicatorColor='rgba(0,0,0,0.5)'
        indicatorSize={25}
        indicatorSpace={17}
        indicatorOffset={0}
        delay={2000}
      >

        {
          this.state.data.map(function (item, index) {
            return (
              <TouchableWithoutFeedback
                key={index}
                onPress={() => navigation.navigate('News', { id: item.id })}
              >
                <Image
                  source={{
                    uri: item.image
                  }}
                  style={styles.container} >

                  <Text style={styles.title}>
                    {item.title}
                  </Text>
                </Image>
              </TouchableWithoutFeedback>
            )
          })
        }
      </Carousel>
    );
  }
}

// export default HomeCarousel;


import {
  requireNativeComponent,
  NativeModules
} from 'react-native'

var Carousel2 = requireNativeComponent('RCTCarousel', null);

class iosHomeCarousel extends Component {
  state = {
    data: this.props.data
  }

  render() {
    var navigation = this.props.navigation;

    var imgArr = [];
    var titlesGroup = [];
    var idArr = [];
    
    this.state.data.map(function (item, index) {
      imgArr.push(item.image)
      titlesGroup.push(item.title)
      idArr.push(item.id)
    })

    return (
      <Carousel2
        imageURLStringsGroup = { imgArr }
        titlesGroup = { titlesGroup }
        onClickBanner={(dic) => {
          navigation.navigate('News', { id: idArr[dic.nativeEvent.index]})
        }}

        style = {{
          height: 150,
          width: '100%',
        }} />
    );
  }
}

export default iosHomeCarousel;


var styles = {
  container: {
    width: screenWidth,
    height: 150,
    // justifyContent: 'center',
    alignItems: 'center',
  },

  title: {
    position: 'absolute',
    color: 'white',
    width: '90%',
    bottom: 25,
    lineHeight: 20,
    fontSize: 16,
    fontWeight: 'bold',
    backgroundColor: 'transparent',
  },
};